<template>
    <h4>个人中心</h4>
    <el-form :model="userinfo" label-position="top" class="box">
        <el-form-item label="用户头像">
            <img :src="userinfo.image_url" v-if="userinfo.image_url" class="image">
            <div class="image" v-else>{{ userinfo.name?.charAt(0) }}</div>
            <el-upload ref="uploadRef" :action="`http://127.0.0.1:8080/user/uploadavatar?account=${userinfo.account}`"
                :limit="1" :on-exceed="limitError" :on-success="imgSuccess" :on-error="imgError"
                :show-file-list="false">
                <template #trigger>
                    <el-button type="primary">上传头像</el-button>
                </template>
            </el-upload>
        </el-form-item>
        <el-form-item label="账号">
            <el-input v-model="userinfo.account" disabled />
        </el-form-item>
        <el-form-item label="修改密码">
            <el-button @click="showpwd">修改密码</el-button>
        </el-form-item>
        <el-form-item label="权限">
            <el-input v-model="userinfo.identity" disabled />
        </el-form-item>
        <el-form-item label="部门">
            <el-input v-model="userinfo.department" disabled />
        </el-form-item>
        <el-form-item label="昵称">
            <el-input v-model="userinfo.name" />
        </el-form-item>
        <el-form-item label="性别">
            <el-select v-model="userinfo.sex" size="large">
                <el-option label="男" value="男" />
                <el-option label="女" value="女" />
            </el-select>
        </el-form-item>
        <el-form-item label="邮箱">
            <el-input v-model="userinfo.email" />
        </el-form-item>
    </el-form>
    <el-button type="success" class="btn" @click="upuserinfo">确认修改</el-button>
    <el-dialog v-model="setpwdshow" title="修改密码" width="500">
        <el-form :model="setpwdinfo" label-position="top">
            <el-form-item label="旧密码">
                <el-input v-model="setpwdinfo.oldpwd" />
            </el-form-item>
            <el-form-item label="新密码">
                <el-input v-model="setpwdinfo.newpwd" />
            </el-form-item>
        </el-form>
        <el-button @click="setpwdshow = false">取消</el-button>
        <el-button type="primary" @click="querypwd">
            确认
        </el-button>
    </el-dialog>
</template>
<script setup>
import { ref, } from 'vue';
import { ElMessage } from 'element-plus'
import { Userstore } from '@/stores/user';
import { upuerinfo,setpassword} from '@/apis/user';
const setpwdshow = ref(false)
const userstore = Userstore()
const userinfo = userstore.userinfo
const setpwdinfo = ref({
    oldpwd: '',
    newpwd: ''
})
// 头像上传成功
const imgSuccess = (res, file) => {
    userinfo.image_url = res.data.url
}
// 上传失败
const imgError = (res) => {
    ElMessage({
        type: "error",
        message: res
    });
}
// 只能上传一个
const limitError = () => {
    ElMessage({
        type: "error",
        message: "图片仅可上传一张"
    });
}
const upuserinfo = async () => {
    const res = await upuerinfo(userinfo)
    ElMessage({
        type: 'success',
        message: res.data.message
    })
}
//显示修改密码狂
const showpwd = () => {
    setpwdshow.value = true
}
// 确认修改密码
const   querypwd =async ()=>{
   const res =await setpassword({...setpwdinfo.value,account:userinfo.account})
   ElMessage({
    type:'success',
    message:res.data.message
   })
   setpwdshow.value=false
}
</script>
<style scoped lang="scss">
.box {
    width: 500px;
    margin: 10px 0 0 30px;

    .image {
        width: 40px;
        height: 40px;
        background-color: aqua;
        border-radius: 50%;
        text-align: center;
        line-height: 40px;
        margin-right: 20px;
    }
}

.btn {
    margin-left: 30px;
}

:deep(.el-form-item__label) {
    color: black;
}

:deep(.el-form-item) {
    height: 50px;
}

:deep(.el-upload--picture-card) {
    width: 100px;
    height: 30px;
}

:deep(.el-button) {
    width: 100%;
}
</style>
